调用百度地图服务API的跨域问题 Vue+jsonp

2024-02-28 00:59| 来源: 网络整理| 查看: 265

背景

今天做一个小页面，这个页面基于百度地图，功能是你输入起始点位置，然后给你规划一条路径并且在地图上可视化出来，当然完成这项工作都是站在百度的肩膀上，在你输入起始点后，需要通过百度地图接口——地理编码服务，正编码接口可以负责把地址名转成经纬度，然后再调用另一个接口得到规划的路径在地图上显示出来。

童鞋们在调用这个接口的时候一定要尽量把地址给写详细了，不然就会出现诸如黄鹤楼迁址北京，清华大学迁址四川这般的乾坤大挪移，还是乖乖输入“武汉黄鹤楼公园”和“北京清华大学”吧（真是产品经理看了沉默，程序员看了流泪系列）

问题

直接调用百度地图的接口会产生跨域问题，也就是说它的这个接口没有设置Access-Control-Allow-Origin（你或许可以在自己的后端封装一个接口然后设置ACAO头），从官方文档上看，他们提供的前端跨域方式为jsonp方案。如果是直接在前端写jsonp代码（jQuery中的$.ajax也可以方便地设置jsonp模式），那我们的确就可以拿到我们想要的数据，但是问题是在Vue中这样做貌似行不通。

踩坑

同文件下原生jsonp写法肯定是行的，这里就不说了，主要是把方法封装在了另一个js文件里

最开始在我封装的方法中我是这样写的：

export function baidu_api_point(place_wanted, callback) { axios({ method: "get", url: `http://api.map.baidu.com/geocoding/v3/?address=${place_wanted}&output=json&ak=我的AK` }) .then(callback) .catch((error)=>console.log(error)) }

显然，报CORS跨域问题，但是axios自身并没有自带jsonp解决方案，所以就自己手写咯：

export function baidu_api_point(place_wanted, callback) { let callbackData = callback; let url = `http://api.map.baidu.com/geocoding/v3/?address=${place_wanted}&output=json&ak=我的AK&callback=callbackData`; let fetchJsonp = function(url){ let body = document.getElementsByTagName('body')[0]; //插入一个script let script = document.createElement('script'); script.setAttribute('src',url); body.appendChild(script); } fetchJsonp(url);

好的，然后不管怎么试，页面始终报callbackData是undefined，简直搞得我怀疑人生，我感觉是vue不同代码间的运行环境和运行模式下造成的问题，但是我又不知道怎么去改，所以开始上网冲浪。

vue-jsonp

随后发现一个npm包，看来已经有人帮我把这个功能实现并且封装好了，那我就再次面向别人的肩膀开发吧~ GitHub-vue jsonp

let url = `http://api.map.baidu.com/geocoding/v3/?address=${this.from_pos}&output=json&ak=我的AK&callback=callbackData`; this.$jsonp(url).then(data => { console.log(data); ...... })

引包挂载完就用，也不用再封装了，否则还要解决一下this指向问题怪麻烦地…

挂载window

当然了，我后来还发现了原生jsonp的解决方案，那就是需要把回调函数挂载在window上，这样就不需要引包了，即：

export function baidu_api_point(place_wanted, callback) { //注意这里挂载在了window上 window.callbackData = callback; let url = `http://api.map.baidu.com/geocoding/v3/?address=${place_wanted}&output=json&ak=我的AK&callback=callbackData`; let fetchJsonp = function(url){ let body = document.getElementsByTagName('body')[0]; //插入一个script let script = document.createElement('script'); script.setAttribute('src',url); body.appendChild(script); } fetchJsonp(url); 总结

vue推荐的ajax库axios并没有自带jsonp解决方案，所以我们需要自己去完成

不愿封装时，直接在页面写jsonp原生解决方案封装在其他js文件中，传入的回调函数需要挂载在window上才可以被调用使用npm包vue-jsonp

【本文地址】

公司简介

联系我们